﻿@using Classified.Domain.Entities
@using Classified.Service
@model Classified.Domain.Entities.ClassifiedAd
@{
    ViewBag.Title = Model.Title;
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="/Scripts/js/jquery.jcarousel.min.js"></script>
<script type="text/javascript">
    function mycarousel_initCallback(carousel) {
        // Disable autoscrolling if the user clicks the prev or next button.
        carousel.buttonNext.bind('click', function () {
            carousel.startAuto(0);
        });

        carousel.buttonPrev.bind('click', function () {
            carousel.startAuto(0);
        });

        // Pause autoscrolling if the user moves with the cursor over the clip.
        carousel.clip.hover(function () {
            carousel.stopAuto();
        }, function () {
            carousel.startAuto();
        });
    };

    jQuery(document).ready(function () {
        jQuery('#mycarousel').jcarousel({
            auto: 5,
            wrap: 'last',
            initCallback: mycarousel_initCallback
        });
    });

</script><div class="well">
@Html.Action("RelatedAds", new { id = Model.CategoryId })

             
    <ul class="breadcrumb">
        <li><a href="#description" onclick="showIt('description');">Description</a> <span class="divider">|</span> </li>
        <li><a href="#googlemaps" onclick="showIt('googlemaps');">Map</a> <span class="divider">|</span> </li>
        <li><a href="#comment" onclick="showIt('comment');">Comment(@Model.ClassifiedComments.Count())</a></li>
        <div style="float: right; margin-right: 23px;"><!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_pinterest_pinit"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-5034cba7380e8626"></script>
<!-- AddThis Button END --></div>
    </ul>
             <div class="span7">
                 <div class="green-title"><h2 style="padding: 0;"> @Model.Title  <span class="view-count">View(@ViewBag.CountID)</span></h2>
                 <div class="clear"></div>
                 </div>
                 <ul class="thumbnails big-detail-img">
                     @if (Model.ClassifiedPicture.Count > 0)
                     {
                         <li class="span7 thumbnail ser-dir-box white-bg">
                             <img src="/Images/670/420/classified/@Model.ClassifiedPicture.First().ImageGuid" alt="@Model.Title" title="@Model.Title" align="left" />
                         </li>
                   
                     }
                     else
                     {
                         <li class="span7 thumbnail ser-dir-box white-bg">
                             <img src="/Images/670/420/images/no-image.jpg" alt="@Model.Title" title="@Model.Title" align="left" />
                         </li>
                     }
                 </ul>
                 <p>
                     @{Html.RenderAction("ClassifiedImageGallery","ClassifiedAds", Model.Id);}
                 </p>
                 <div class="clear">
                 </div>
                 <div id="description">
                     <div class="green-title">
                         Description</div>
                     <div class="thumbnail white-bg pad12">
                         @foreach (var i in Model.AttributeValues)
                         {
                             <div class="clearfix">
                                 <label>@i.ClassifiedCategoryAttributes.Attr_Label</label>
                                 <div class="input">
                                     <label>@i.Value</label>
                                 </div>
                             </div>
                         }
                         @{
                             var data = new List<ClassifiedAttribute>();
                         }
                         @foreach (var i in data.Where(x => x.ClassifiedId == Model.Id))
                         {
                             <div class="clearfix">
                                 <label>@i.ClassifiedCategoryAttributes.Attr_Label</label>
                                 <div class="input">
                                     <label>@i.Value</label>
                                 </div>
                             </div>
                         }
                         <p>@Html.Raw(Model.Description)</p>
                     </div>
                 </div>
                 @if (!Request.IsLocal)
                 {
                     <div class="google-ads">
                         <h2>
                             Sponsored Links</h2>
                         <script type="text/javascript"><!--
                             google_ad_client = "ca-pub-6965065309596019";
                    /* Ads Details */
                             google_ad_slot = "1597253769";
                             google_ad_width = 728;
                             google_ad_height = 90;
                         //-->
                </script>
                         <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
                </script>
                     </div>
       
                 }
             </div>
    <div class="span4">
        <div class="alert alert-info">
            @if(Model.Users.Count() != 0)
                {<div class="highlighted">
                    <h3>
                    @Model.Users.FirstOrDefault().UserName <small>- Since: @Model.CreatedOnUtc.ToString("MMMM-dd,yyyy")</small></h3>
                    </div>
                }
            @if (Model.Price != 0)
            {
                <p>@SeService.GetCurrentCode(Model.Id) @Model.Price</p>
              
                
            }
      
            <p>
                @Model.Address</p>
            @if(Model.Users.Count() != 0)
            {
                <p><a href="@Url.Action("ClassifiedByUser",new{userId= Model.Users.FirstOrDefault().Id })" style="color: #FE7601"><i class="icon-user"></i> <b>User's Other Ads</b></a> </p>
            }
        
              <p><i class="contact-icon"></i>
                @Model.PhoneNumber</p>
            <div class="clear">
            </div>
            <a id="newDetailState" class="btn btn-large span3 btn-warning" data-Ads="@Model.Id"  style="margin: 15px; font-size: 20px;">
                <b> Reply to this Ads</b> </a>
            <div class="clear">
            </div>
            @if (!Request.IsLocal)
            {
                <div id="googlemaps" style="border-radius: 4px; margin: 15px;" class="thumbnail">
                
                    @if (Model.Address != null && Model.Address != "")
                    {
               
                        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
                        <script type="text/javascript">
                            $(document).ready(function () {
                                initialize();
                                codeAddress();

                            });



                            var geocoder;
                            var map;
                            function initialize() {
                                geocoder = new google.maps.Geocoder();
                                var latlng = new google.maps.LatLng(-34.397, 150.644);
                                var myOptions = {
                                    zoom: 13,
                                    center: latlng,
                                    mapTypeId: google.maps.MapTypeId.ROADMAP

                                };
                                map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
                                infoWindow = new google.maps.InfoWindow({ content: "Content....." });
                            }

                            function codeAddress() {
                                var address = '@Model.Address.Replace("\n", " ")';

                                geocoder.geocode({ 'address': address }, function (results, status) {
                                    if (status == google.maps.GeocoderStatus.OK) {
                                        map.setCenter(results[0].geometry.location);
                                        var marker = new google.maps.Marker({
                                            map: map,
                                            position: results[0].geometry.location,
                                            html: address
                                        });
                                        google.maps.event.addListener(marker, "click", function () {
                                            infoWindow.setContent(this.html);
                                            infoWindow.open(map, this);

                                        });
                                    }
                                });

                            }
                        </script>
                   
                        <div id="map_canvas" style="height: 400px" draggable="false" data-header="true">
                        </div>
                
                    }
                </div>
            }
        </div>
        @if (!Request.IsLocal)
        {
            <div class="google-ads">
                <h2>
                    Sponsored Links</h2>
                <div class="thumbnail">
                    <script type="text/javascript"><!--
                        google_ad_client = "ca-pub-6965065309596019";
                        /* Right Side Ads Details Page */
                        google_ad_slot = "4836265284";
                        google_ad_width = 320;
                        google_ad_height = 50;
//-->
                    </script>
                    <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
                </div>
            </div>
            
        }
    </div>

<div class="clear">
</div>
 <div id="comment" class="span11" style="padding: 15px 0px;">
    @Html.Action("CommentList", new { classifiedId = Model.Id })</div>
             <div class="span11" style="padding: 15px 0px;">
                 @Html.Action("ClassifiedComment", new { ClassifiedId = Model.Id })</div>

<div class="clear">
</div>
</div>
<script language="javascript" type="text/javascript">
    function clearErrors() {
        $('#msgErrorNewLocationDetails').html('');
        $('#msgError').html('');
    }

    function writeError(control, msg) {
        var err_msg = '<div class="alert-message error"><a class="close" href="#">×</a><p>' + msg + '</p></div>';
        $('#' + control).html(err_msg);
    }

    $(document).ready(function () {

        $('.closeModal').live('click', function () {
            $('#my-modal').modal('hide');
        });
        $('.close').live('click', function () {
            $('#my-modal').modal('hide');
        });

        $('#my-modal form').live('submit', function () {
            clearErrors();

            $.post($(this).attr('action'), $(this).serialize(), function (data, status) {
                $('#my-modal').modal('hide');
                window.location.reload(true);

            }).error(function (error, status, a, b) {
                writeError('msgError', 'Error processing request. Please check errors and try again!');
                $('.modal-body p.body').html(error.responseText);

            });
            return false;
        });

        function getRequest(url) {
            $.ajax({
                url: url,
                context: document.body,
                success: function (data) {
                    $('.modal-body p.body').html(data);
                    $(this).addClass("done");
                    $('#my-modal').modal('show');
                    $('#Article').focus();
                },
                error: function (err) {
                    writeError('msgErrorNewLocationDetails', err);
                }
            });
        }

        $('a#newDetailState').live('click', function () {
            clearErrors();
           
            var url = '@Url.Content("/classified/reply/")' + @Model.Id;

            getRequest(url);

            return false;
        });
    }); 
    
    function showIt(elID)
    {
      var el = document.getElementById(elID);
      el.scrollIntoView(true);
    }
</script>
<div id="my-modal" class="modal hide fade">
    <div class="modal-header">
        <h2>
            Reply To This Ads <a href="javascript:void(0);" class="close">&times;</a></h2>
    </div>
    <div class="modal-body">
        <div id="msgError">
        </div>
        <p class="body">
        </p>
    </div>
    <div class="modal-footer">
    </div>
</div>
